function multipleAnswer(answer,name) {
    if (name==null){
        name='args[questionselect][]';
    }
    return "    <!--按钮-->\n" +
        "    <div class='col-sm-1'>\n" +
        "    <button type='button' class='btn btn-danger multiple-choice' style='margin-right: 20px'><span class='glyphicon glyphicon-trash'></span></button>\n" +
        "    </div>\n" +
        "    <div class='col-sm-1'>\n" +
        "    <button type='button' class='btn btn-default btn-select'>"+answer+"</button>\n" +
        "    </div>\n" +
        "    <!--文本-->\n" +
        "    <div class='col-sm-10'>\n" +
        "    <input class='form-control' name='"+name+"' type='text'>\n" +
        "    </div>\n" +
        "    <div class='clearfix'></div>\n"
}

function btnSelect(ele) {
    if(ele[0]==null){
        ele=this;
    }else {
        ele=ele.get(0);
    }

    if(ele.className==="btn btn-default btn-select"){
        ele.className="btn btn-info btn-select";
        $(ele).after("<input type='hidden' name='args[questionanswer][]' value='"+ele.innerHTML+"'>");
    }else {
        ele.className="btn btn-default btn-select";
        $(ele).nextAll().remove();
    }
}

function multiple(parent) {
    parent.html("<div class='form-group'>\n" +
        "    <label class='col-sm-2 control-label'><h3>选择题</h3></label>\n" +
        "    <div class='col-sm-10' style='padding: 0px 15px'>\n" +
        "        <div class='border-circle'>\n" +
        "            <h3 class='text-center'>选择题答案</h3>\n" +
        "            <div class='multiple-answers'>\n" +
        "            </div>\n" +
        "            <div class='set-select'  style='padding-left: 20px'>\n" +
        "                <button type='button' class='btn btn-info multiple-add'>+添加选项</button>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "</div>");

    //初始化选项
    var answer=parent.find(".multiple-answers");
    for(var i=0;i<4;i++){
        var node=document.createElement("div");
        node.className="set-select multiple-answer";
        node.innerHTML=multipleAnswer(String.fromCharCode("A".charCodeAt()+i));
        answer.append(node);
    }

    $(".btn-select").click(btnSelect);
    $(".multiple-add").click(multipleAdd);
    $(".multiple-choice").click(multipleRemove);
}

function tfngEvent() {
    //绑定判断题事件
    var div=document.getElementById("tfng-select");
    btns=div.getElementsByTagName("button");
    btns[0].onclick=function () {
        $("input[name='args[questionanswer][]']").val('正确');
        btns[0].className="btn btn-info";
        btns[1].className="btn btn-default";
    };
    btns[1].onclick=function () {
        $("input[name='args[questionanswer][]']").val('错误');
        btns[1].className="btn btn-info";
        btns[0].className="btn btn-default";
    }
}

function tfng(parent) {
    parent.html("<div class='form-group'>\n" +
        "    <input type='hidden' name='args[questionselect][]' value='正确'>\n" +
        "    <input type='hidden' name='args[questionselect][]' value='错误'>\n" +
        "    <input type='hidden' name='args[questionanswer][]' value='正确'>\n" +
        "    <label class='col-sm-2 control-label'><h3>判断题</h3></label>\n" +
        "    <div class='col-sm-10' style='padding: 0px 15px'>\n" +
        "        <div class='border-circle'>\n" +
        "            <h3 class='text-center'>判断题答案</h3>\n" +
        "            <div id='tfng-select'>\n" +
        "                <div class='set-select'>\n" +
        "                    <button class='btn btn-info' value='1' type='button'>O</button> &nbsp;&nbsp;是\n" +
        "                </div>\n" +
        "                <div class='set-select'>\n" +
        "                    <button class='btn btn-default' value='0' type='button'>X</button> &nbsp;&nbsp;否\n" +
        "                </div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "</div>");

    tfngEvent();
}

//填空题完整版脚本
function completion(parent) {
    parent.html("<div class='form-group'>\n" +
        "    <label class='col-sm-2 control-label'><h3>填空题</h3></label>\n" +
        "    <div class='col-sm-10' style='padding: 0px 15px'>\n" +
        "        <div class='border-circle'>\n" +
        "            <h3 class='text-center'>填空题答案</h3>\n" +
        "            <!--一个答案的位置-->\n" +
        "            <div id='completion'>\n" +
        "                <div class='completion-answer'>\n" +
        "                    <!--第一个选项-->\n" +
        "                    <div class='completion-first'>\n" +
        "                        <div class='col-sm-1'>\n" +
        "                        </div>\n" +
        "                        <div class='col-sm-9'>\n" +
        "                            <input type='text' name='args[questionanswer][0][]' class='form-control'>\n" +
        "                        </div>\n" +
        "                        <div class='col-sm-2'>\n" +
        "                            <button type='button' class='btn btn-info completion-add'>或</button>\n" +
        "                        </div>\n" +
        "                        <div class='clearfix'></div>\n" +
        "                    </div>\n" +
        "                    <!--其他选项位置-->\n" +
        "                    <div class='completion-other'>\n" +
        "\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "                <!--新增选项-->\n" +
        "            </div>\n" +
        "            <div class='set-select' style='padding:20px 0 0 20px'>\n" +
        "                <button type='button' class='btn btn-info' id='new-completion'>+添加选项</button>\n" +
        "            </div>\n" +
        "            <div class='clearfix'></div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "</div>");

    $(".completion-add").click(addCompletion);

    document.getElementById("new-completion").onclick=newCompletion;
}

//填空题的序列号
var sequence=1;

//增加一个或选项
function addCompletion(ele) {
    if(ele[0]==null){
        ele=$(this);
    }
    var completion=ele.parents(".completion-answer")[0].getElementsByClassName("completion-other")[0];
    var dom=document.createElement("div");
    dom.className="completion-second";
    var name=ele.parents(".completion-answer").find("input[type='text']")[0].name;
    dom.innerHTML= "<div class='col-sm-1'>\n" +
        "</div>\n" +
        "<div class='col-sm-9'>\n" +
        "<input type='text' name='"+name+"' class='form-control'>\n" +
        "</div>\n" +
        "<div class='col-sm-2'>\n" +
        "<button type='button' class='btn btn-danger completion-remove'>\n" +
        "<span class='glyphicon glyphicon-remove'></span>\n" +
        "</button>\n" +
        "</div>\n" +
        "<div class='clearfix'></div>\n";
    completion.appendChild(dom);

    $(".completion-remove").unbind("click");
    $(".completion-remove").click(removeCompletion);

    return $(dom);
}

//删除一个或选项
function removeCompletion() {
    $(this).parents(".completion-second")[0].remove();
}

//增加一个选项
function newCompletion() {
    var completion=$("#completion")[0];
    var dom=document.createElement("div");
    dom.className="completion-answer";
    dom.innerHTML= "<!--第一个选项-->\n" +
        "                                        <div class=\"completion-first\">\n" +
        "                                            <div class=\"col-sm-1\">\n" +
        "                                                <button type=\"button\" class=\"btn btn-danger trash\">\n" +
        "                                                    <span class=\"glyphicon glyphicon-trash\"></span>\n" +
        "                                                </button>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"col-sm-9\">\n" +
        "                                                <input name='args[questionanswer]["+sequence+"][]' type=\"text\" class=\"form-control\">\n" +
        "                                            </div>\n" +
        "                                            <div class=\"col-sm-2\">\n" +
        "                                                <button type=\"button\" class=\"btn btn-info completion-add\">或</button>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"clearfix\"></div>\n" +
        "                                        </div>\n" +
        "                                        <!--其他选项位置-->\n" +
        "                                        <div class=\"completion-other\">\n" +
        "\n" +
        "                                        </div>\n";
    sequence++;
    completion.appendChild(dom);
    $(".trash").unbind("click");
    $(".completion-add").unbind("click");
    $(".trash").click(removeNew);
    $(".completion-add").click(addCompletion);

    return $(dom);
}

//删除一个选项
function removeNew() {
    var removes=$(this).parents(".completion-answer");
    var node=removes[0];
    node.remove();
    sequence--;
    //刷新所有的节点的名字
    var answers=$(".completion-answer");
    for(var i=0;i<answers.length;i++){
        console.log($(answers[i]));
        $(answers[i]).find("input[type='text']").attr('name',"args[questionanswer]["+i+"][]");
    }
}


var answer=4;

//选择题区
function multipleAdd(ele) {
    var dom=document.createElement("div");
    dom.className="set-select multiple-answer";
    dom.innerHTML=multipleAnswer(String.fromCharCode("A".charCodeAt()+answer));
    if(ele[0]==null){
        $(this).parents(".border-circle").children(".multiple-answers").append(dom);
    }else {
        ele.append(dom);
    }

    answer++;

    $(".multiple-choice").unbind("click");
    $(".btn-select").unbind("click");
    $(".multiple-choice").click(multipleRemove);
    $(".btn-select").click(btnSelect);

    return $(dom).find("input[type='text']");
}

//移除选择题的选项
function multipleRemove() {
    var node=$(this).parents(".multiple-answer")[0];
    console.log($(this).parents(".multiple-answer"));
    node.parentNode.removeChild(node);

    var nodes=$(".btn-select");
    for(var i=0;i<nodes.length;i++){
        nodes[i].innerHTML=String.fromCharCode("A".charCodeAt()+i);
    }
    answer=nodes.length;
}

